<template>
	<div class="lietou-detail content">
		<div class="detail-bg"></div>
		<div class="lietou-right">
      <!-- <breadcrumb id="breadcrumb-container" class="breadcrumb-container" /> -->
			<!-- 账户流水 -->
			<div class="table-form">
				<h2 class="lietou-detail-h1"></h2>
				<el-form ref="form" :inline="true" label-width="120px" size="small" style="margin-bottom:20px;">
          <el-form-item label="城市名称" label-width="100px">
						<el-input placeholder="请输入城市名称" v-model="username" clearable class="search-input"></el-input>
					</el-form-item>
					<el-form-item label="代理商手机号" label-width="100px">
						<el-input placeholder="请输入代理商手机号" v-model="searchPhone" maxlength="11" clearable class="search-input"></el-input>
					</el-form-item>
					<el-form-item style="margin:-2px 0 0 10px;">
						<el-button icon="el-icon-search" @click="searchData" class="buttonStyle">搜索</el-button>
					</el-form-item>
				</el-form>
				<el-table header-row-class-name="my-table-header" :data="tableData" class="answerTable" style="width: 100%;"
				 :header-cell-style="{ background: '#eee',color:'#555555'}" stripe :row-style="{height:'54px'}"
				 :highlight-current-row="true">
					<el-table-column fixed type="index" label="序列" width="90" column-key="id" align="center"></el-table-column>
					<el-table-column prop="pname" label="所属省份"></el-table-column>
					<el-table-column prop="cname" label="城市名称"></el-table-column>
					<el-table-column align="center" label="是否关联代理商">
						<template slot-scope="scope">
						  <span>{{scope.row.uid==null?'否':'是'}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="usertel" label="代理商手机号"></el-table-column>
					<el-table-column align="center" label="操作" width="220">
						<template slot-scope="scope">
						  <el-button slot="reference" size="small" type="primary" class="handle-btn" @click="onConfirm(scope.row.id)">设置</el-button>
						  <el-button slot="reference" type="danger" size="small" class="handle-btn" @click="onRefuse(scope.row.id)" v-if="scope.row.uid!=null">取消关联</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-row type="flex" class="row-bg" justify="center" v-show="pageCount>1">
					<el-col :span="24" style="text-align:center;margin-top:50px">
						<el-pagination background layout="prev, pager, next" :page-size="pageSize" :page-count="pageCount" :current-page="pageNo"
						 @current-change="pageChange">
						</el-pagination>
					</el-col>
				</el-row>
			</div>
		</div>
	</div>
</template>

<script>
	import { mapGetters } from 'vuex'
	import Breadcrumb from '@/components/Breadcrumb'
	export default {
		name: 'FinaceTicket',
		components:{
			Breadcrumb
		},
		computed: {
			...mapGetters([
				'token'
			])
		},
		data() {
			return {
				searchPhone:'',
				username:'',
				tableData: [], //表格数据
				pageCount: 0,
				pageNo: 1,
				pageSize: 10
			}
		},
		async created() {
			this.loadData();
		},
		methods:{
			// 搜索
			searchData(){
				this.pageNo=1;
				this.loadData();
			},
			//分页
			pageChange(val) {
			  this.pageNo = val;
			  this.loadData()
			},
			async loadData() {
			  const loading = this.$loading({
				 lock: true,
				 text: 'Loading',
				 spinner: 'el-icon-loading',
				 background: 'rgba(0, 0, 0, 0.5)'
			  });
			  try {
				let data = {
					"token": this.token,
					"name": this.username,
					"mobile": this.searchPhone,
					"p": this.pageNo,//分页页码
					"size": this.pageSize,//分页每页数量
				 }
				 let res = await this.$http({
				   url: '/man/city/getList',
				   method: 'post',
				   params: data
				 });
				 this.pageCount = res.max_page; //总页数
				 this.pageNo = Number(res.p); //当前页 size当前页
				 this.tableData = res.data;
				 loading.close();
			  } catch (e) {
				 console.log(e)
				 loading.close();
			  }
			},
			// 取消关联
			onRefuse(id){
				this.$confirm('是否确认取消关联？', '操作确认', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(async value => {
					let res = await this.$http({
						url: '/man/Agent/cancelBindCity',
						method: 'post',
						params: {
						  "token": this.token,
						  "id": id
						}
					});
					this.$message({
						type: 'success',
						message: '已取消关联！'
					});
					this.loadData();
				}).catch(error => {
			
				});
			},
			// 设置
			onConfirm(id){
				this.$prompt('请填写代理商手机号？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputPattern:  /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/,
					inputPlaceholder:'请填写代理商手机号',
					inputErrorMessage: '手机号格式不正确',
					closeOnHashChange: false,
					closeOnClickModal: false
				}).then(async ({ value }) => {
					let data = {
					 	"token": this.token,
						"cityid": id,
					 	"mobile": value
					}
					let res = await this.$http({
					 	url: '/man/Agent/bindCity',
					 	method: 'post',
					 	params: data
					});
					this.$message({
					 	type: 'success',
					 	message: res.msg
					});
					this.loadData();
				}).catch(error => {
			
				})
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.lietou-detail{
		// background-color: #f4f4f4;
		background-color: rgb(240, 242, 245);
		position: relative;

		.detail-bg {
		  position: fixed;
		  top: 0px;
		  left: 0;
		  bottom:0;
		  right: 0;
		  background: #f4f4f4;
		}

	}
	.el-button.buttonStyle{
	  height: 32px;
	  font-size: 14px;
	  font-family: PingFangSC-Medium, PingFang SC;
	  font-weight: 500;
	  color: #FFFFFF;
	  background:#3674FF;
	  border-radius: 5px;
	  border:0;
	  margin-left:6px;
	  margin-top:2px;
	}
	.el-button.buttonStyle2{
	  font-size: 14px;
	  border-radius: 5px;
	  margin-left:15px;
	}
	.lietou-detail-head{
		background-color: #fff;
		margin:0 0 20px 0px;
		padding-bottom:25px;
		position: relative;
		min-width:800px;

		.lietou-msg{
			width:280px;
			display: flex;
			margin-left:30px;
		}
		.works{
			position: absolute;
			top:20px;
			right:30px;
			color: rgba(33, 120, 241, 1);
		}
		.lietou-number{
			border-left:1px #ddd solid;
			padding-left:30px;
			margin-top:30px;
		}
		.lahei-btn{
			position: absolute;
			right:30px;
			top:25px;
		}
		.acount{
			margin:0 0 20px 30px;
			padding-top:8px;

			span{
				margin-right:50px;
			}
		}
		.answerTable{
			margin:10px auto;
			width: 96%;
		}
		.acount-balance{
			font-size:36px;
			font-weight: 500;
		}
		.submit-btn{
			display: block;
			margin-top:-5px;
		}
	}
	.table-form{
		background-color: #fff;
		padding:0 20px 20px;
	}
	.lietou-detail-h1{
		font-size:17px;
		line-height: 20px;
		font-weight: bold;
		padding:5px 0 5px;
	}
	.search-bar{
		::v-deep{
			.el-form-item__label{
				font-weight: 500;
			}
		}
	}
  .handle-btn{
    border-radius: 5px;
    margin:0 8px;
  }
</style>
<style>
	.el-message{
		top:120px !important;
	}
</style>
